import { Upload, message } from "antd";
import { InboxOutlined } from "@ant-design/icons";
import "./UploadFile.css"

const { Dragger } = Upload;

const props = {
  name: "uploadFile",
  multiple: true,
  action: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
  progress: {strokeWidth: 4, showInfo: true, size:"middle"},
  onChange(info) {
    console.log("info:" + info.file)
    const { status } = info.file;
    if (status !== "uploading") {
      console.log(info.file, info.fileList);
    }
    if (status === "done") {
      message.success(`${info.file.name} 上传成功!`);
    } else if (status === "error") {
      message.error(`${info.file.name} 上传失败！`);
    }
  },
  onDrop(e) {
    console.log("Dropped files", e.dataTransfer.files);
  },
};

function UploadFile() {
  return (
    <Dragger {...props}>
      <p className="ant-upload-drag-icon">
        <InboxOutlined />
      </p>
      <p className="ant-upload-text">
        拖拽文件到此处上传
      </p>
      <p className="ant-upload-hint">
      支持单次或批量上传。请勿上传涉密文件！
      </p>
    </Dragger>
  );
}

export default UploadFile;
